<template>
  <div>
    <div>
      <van-button icon="home-o" size="mini" to="/home" block></van-button>
      <van-search v-model="value" shape="round" background="#ff0000" placeholder="请输入搜索关键词"/>
    </div>
    <van-tree-select height="100%" :items="items" :main-active-index.sync="active"
                     @click-nav="comCategoryId">
      <template #content>
             <div>
               <div v-for="item in CommodityList" :key="item.id">
                 <van-card :title="item.comName" :desc="item.comSynopsis" :price="item.comPrice" :thumb="item.comUrl"/>
               </div>
             </div>
      </template>
    </van-tree-select>


    <div>
      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit"/>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      active: 0,
      value: '',
      items: [],
      categoryList:[],
      CommodityList:[],
      categoryId:'',
    }
  },
  created() {
     this.getCategoryList()
    this.comCategoryId(0);
  },
  methods: {
    getCategoryList() {
      axios.get('http://localhost:8081/category/category/list').then(res => {
        console.log(res.data)
        this.categoryList = res.data
        this.categoryList.forEach(v => {
          this.items.push({
            text: v.categoryName,
            id: v.id
          })
        })
      })


    },

    onSubmit() {

    },
    comCategoryId(index) {
      this.categoryId = index+1
      axios.get('http://localhost:8081/item/item/categoryId/'+this.categoryId).then(res => {
        console.log(res.data)
        this.CommodityList = res.data
      })
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>



